import Author from "./author";
type Post = {
    id: number,
    userId: number,
    title: string,
    body: string
}
export default async function PostsSequential() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts: Post[] = await response.json();
    // 同一个id，显示十条
    const filterPosts = posts.filter(post => post.id % 10 === 1);
    return (
        <div className="p-4 max-w-7xl mx-auto">
            <h1 className="text-3xl font-bold">Blog Posts</h1>
            <ul className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {
                    filterPosts.map(post => (
                        <li key={post.id} className="border border-gray-400 p-4 rounded-md shadow-md">
                            <h2 className="text-2xl font-bold mb-3 leading-tight">{post.title}</h2>
                            <p className="text-gray-600 mb-4 leading-relaxed">{post.body}</p>
                            {/* <p>Author name to be fetched</p> */}
                            {/* 替换为Author组件 */}
                            <Author userId={post.userId} />
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}
